<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>核心函数</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="../../jsfile/layer.css"/>
    <script src="../../jsfile/jquery.js"></script>
    <script src="../../jsfile/layer.js"></script>
    <script src="../../jsfile/base.js"></script>
    <script>
        //核心函数的4个作用
        $(function () {
            //(1)
            //alert("页面加载完成之后,自动调用...");

            //(2)将元素标签转化为dom对象   【将dom对象追加到body中】
            $("<div>" +
                "    <span>div-span1</span>" +
                "    <span>div-span2</span>" +
                "</div>").appendTo("body");

            //获取button标签的jquery对象 ， 这里是数组
            //alert($("button").length);

            //[object HTMLButtonElement]
            // var btnObj = document.getElementById("btn01");
            // alert(btnObj);
            // //jquery对象
            // alert($("#btn01"));//[object object]

            var arr = [12 , "abc" , true];

            //获取所有的button按钮
            // var $btns = $("button");
            // for(var i = 0 ; i < $btns.length ; i++){
            //     //jquery查询出来的对象,其本质还是dom对象
            //     alert($btns[i]);
            // }

            //使用DOM方法操作DOM对象
            // document.getElementById("testDiv").innerHTML = "这是dom对象的属性innerhtml";
            //使用DOM方法操作jquery对象 (x)
            // $("#testDiv").innerHTML = "这是dom对象的属性innerhtml";

            //使用jquery方法操作jquery对象
            // $("#testDiv").click(function (){
            //     alert("click()是jquery对象的方法");
            // });

            //使用jquery方法操作DOM对象
            // document.getElementById("testDiv").click(function (){
            //     alert("click()是jquery对象方法");
            // });

            //将dom 对象转化为 jquery对象
            // $(document.getElementById("testDiv")).click(function (){
            //     alert("click()是jquery对象方法");
            // });

            //将jquery对象转化为dom对象
            //只需要读取0即可   0 就代表是DOM对象
            $("#testDiv")[0].onclick = function(){
                alert(1212);
            }

            console.log($("#testDiv"));




        })
    </script>
</head>
<body>
<p id="text_show">
    核心函数<br/>
    传入的参数为 函数 的时候,在文档加载完成后执行这个函数<br/>
    传入的参数为 html字符串的时候,根据这个字符串创建元素节点对象<br/>
    传入的参数为 选择器字符串的时候,根据这个字符串来查找元素的节点对象<br/>
    传入的参数为 DOM对象的时候 ,将DOM对象包装为jquery对象返回<br/>

    jquery对象和dom对象的区分<br/>
    什么是jquery对象,什么是dom对象<br/>
    DOM对象<br/>
    1.通过getElementById()查询出来的标签对象是Dom对象<br/>
    2.通过getElementsByName()查询出来的标签对象是Dom对象<br/>
    3.通过getElementsByTagName()查询出来的标签对象是Dom对象<br/>
    4.通过createElement()方法创建的对象是DOM对象<br/>
    DOM对象alert出来的效果是 [object HTML 标签名 Element]<br/>

    jquery对象<br/>
    5.通过jquery提供的api创建的对象,是jquery对象<br/>
    6.通过jquery包装的Dom对象,也是jquery对象<br/>
    7.通过jquery提供的api查询出来的对象,是jquery对象<br/>
    jquery对象alert出来的效果是：[object object]<br/>

    4.2问题：jquery对象的本质是什么?
    jquery对象是dom对象的数组+jquery提供的一系列的功能函数

    4.3:jquery对象和DOM对象的使用区别
    jquery对象不能使用DOM对象的属性和方法
    DOM对象也不能使用jquery对象的属性和方法


</p>

<div class="look_source_code" onclick="getPageContent()">查看源码</div>


<br/>
<br/>

<div id="testDiv">Atguigu is Very Good!</div>
<button id="dom2dom">使用DOM对象调用DOM方法</button>
<button id="dom2jQuery">使用DOM对象调用jQuery方法</button>
<button id="jquery2jquery">使用jquery对象调用jquery方法</button>
<button id="jquery2dom">使用jquery对象调用DOM方法</button>
</body>
</html>